<template>
  <div class="page bgc-fff">
    <!-- header -->
    <div class="header">
      <ul class="lisa-list bor-bottom pad-t30">
        <li class="lisa-list-body 20">
          <a href="javascript:void(0)" class="lisa-list-item">
            <div class="lisa-list-content" @click="toUserInfo()">
              <div class="header-head mr10">
                <img :src="userInfoData.userPic"  alt="">
              </div>
              <div class="lisa-list-text">
                <div class="lisa-list-title">
                  <span class="mr10 f14 c-fff">{{text0}}</span>
                  <span class="f14 c-ffaa09">{{text6}}</span>
                </div>
                <div class="lisa-list-brief c-fff">
                  {{text1}}
                </div>
                <div class="lisa-list-brief c-fff">
                  {{text5}}
                </div>
              </div>
            </div>
            <img @click="toUserInfo()" class="icon-btn-right" :src="staticImgData.imgurlb" alt="">
          </a>
        </li>
      </ul>
    </div>
    <!-- content -->
    <div class="content">
      <div class="content-item bor-bottom" @click="toCarInfo">
        <div class="flex a-start l-center">
          <!-- <i class="icon"></i> -->
          <p>车辆信息</p>
        </div>
        <div class="flex a-end l-center ">
          <span class="mr10 f14 c-01a4f6" v-if="!vehicleInfoStatus">{{text2}}</span>
          <img class="icon-btn-right" :src="staticImgData.imgurlb" alt="">
        </div>
      </div>
      <div class="content-item bor-bottom" @click="toUserClass">
        <div class="flex a-start l-center">
          <!-- <i class="icon"></i> -->
          <p>我的报班</p>
        </div>
        <img :src="staticImgData.imgurlb" alt="">
      </div>
      <div class="content-item bor-bottom" @click="toRevisePwd">
        <div class="flex a-start l-center">
          <!-- <i class="icon"></i> -->
          <p>密码修改</p>
        </div>
        <img :src="staticImgData.imgurlb" alt="">
      </div>
      <!-- <div class="mo-spacing"></div> -->
    </div>
    <!-- button -->
    <div class="loginout-btn">
      <div class="pad-l-r15 ">
        <p class="large-btn bor-1-DEDEDE c-333" @click="toLoginOut">退出登录</p>
      </div>
    </div>
    <!-- <div style="height:.5rem;"></div> -->

    <v-tabbar></v-tabbar>
    <confirm
      v-model="confirmShow"
      :show-cancel-button="false"
      :title="confirmData.title"
      :content="confirmData.context"
      @on-confirm="onConfirm">
      <!--<p style="text-align:center;">{{confirmData.context}}</p>-->
    </confirm>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
import LisaTabbar from '@/components/common/tabbar/tabbar'
import Loading from '@/components/common/loading/loading'
import * as ThreeStorage from '@/utils/store/token.js' // cookie local session 统一管理
import { Confirm } from 'vux'
import * as DirverApi from '@/api/dirver'
export default {
  name: 'me-driverLanding',
  data() {
    return {
      navName: '', // footer_nav 传选中nav的name
      staticImgData: {
        imgurla: require('@/assets/image/v1/user/edit.png'),
        imgurlb: require('@/assets/image/common/btn_right.png')
      },
      userInfoData: {
        userPic: require('@/assets/image/common/user.png'),
        weixinName: '用户',
        dirverName: '用户'
      },
      confirmShow: false, // vux-confirm提示弹窗
      confirmData: {
        title: '提示',
        context: '正在建设中,后续开放...'
      },
      resDirverData: {},
      driverInfoStatus: false,
      vehicleInfoStatus: false,
      loadingShow: false,
      isCanCheck: false,
      isCheckList: [],
      text0: '',
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      text5: '',
      text6: ''
    }
  },
  components: {
    Confirm,
    'v-loading': Loading,
    'v-tabbar': LisaTabbar
  },
  created() {
    this.getDirverIsAuth()
  },
  methods: {
    onConfirm: function() {
      console.log('confirm()-确定')
    },
    getDirverIsAuth: function() {
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      that.loadingShow = true
      DirverApi.getDriver(driver_Id).then(res => {
        that.loadingShow = false
        if (res.code === 0) {
          that.resDirverData = res.data
          if (that.resDirverData.name) {
            that.text0 = that.resDirverData.name
          } else if (that.resDirverData.mobile) {
            that.text0 = that.resDirverData.mobile
          } else {
            that.text0 = '用户'
          }
          if (that.resDirverData.status === 1) {
            that.text3 = '已启用'
          } else {
            that.text3 = '已停用'
          }
          if (that.resDirverData.authStatus === 1) {
            that.text4 = '已认证'
          } else {
            that.text4 = '未认证'
          }
          this.text6 = '(' + that.text4 + '、' + that.text3 + ')'
          if (that.resDirverData.lspName) {
            that.text5 = that.resDirverData.lspName
          } else {
            that.text5 = '暂无所属承运商'
          }
        }
      }).catch(res => {
        that.loadingShow = false
        console.warn('error', res)
      })
      DirverApi.getInfoIsFill(driver_Id).then(res => {
        if (res.code === 0) {
          that.driverInfoStatus = res.data.driverInfoStatus
          that.vehicleInfoStatus = res.data.vehicleInfoStatus
          if (that.driverInfoStatus === false) {
            that.text1 = '认证信息未完善，去完善'
          } else {
            that.text1 = ''
          }
          if (that.vehicleInfoStatus === false) {
            that.text2 = '请先完善车辆信息'
          } else {
            that.text2 = ''
          }
          this.isCanCheck = res.data.canCheckin
          this.isCheckList = res.data.noCheckinReason
        }
      }).catch(res => {
        console.warn('error', res)
      })
    },
    toUserInfo: function() {
      this.$router.push({ name: 'me-driverProfile' })
    },
    toCarInfo: function() {
      this.$router.push({ name: 'me-driverVehicleProfile' })
    },
    toUserClass: function() {
      if (!this.isCanCheck) {
        let res_html = ''
        let create_html = ''
        const res_list = this.isCheckList
        for (const k in res_list) {
          const item = res_list[k]
          const kk = k * 1 + 1
          res_html = '<div class="flex l-center a-left"><span class="ml20" style="font-size: 0.14rem;color: #888;font-weight: 400;text-algin:left;float:left;">' + kk + '. ' + item + '</span><br/></div>'
          create_html += res_html
        }
        if (create_html !== '') {
          this.confirmData.context = create_html
          this.confirmShow = true
        }
      } else {
        this.$router.push({ name: 'me-driverCheckin' })
      }
    },
    toRevisePwd: function() {
      this.$router.push({ name: 'me-updatePassword' })
    },
    toLoginOut: function() {
      console.log('进行登出')
      this.$store.dispatch('FedLogOut')
    }
  }
}
</script>

<style scoped>
@import '../../styles/util.css';
@import '../../styles/basic/list.css';
.c-00BFFF{
  color:  #00BFFF;
}
.block-border{
  border-radius: .04rem;
  /* border: 1px  solid #dedede ; */
  padding: .02rem;
  /* margin-right: .05rem; */
}
.main-item>img {
  width: .4rem;
  height: .4rem;
  margin-right: .15rem;
}
.large-btn.c-333{
  color: #000;
}
/* header */
.header{
  background: url('../../assets/image/v1/user/header_bg.png') no-repeat center top;
  background-size: 100%;
  position: relative;
}
.header-head{
  width: .56rem;
  height: .56rem;
  /* margin-left: auto;
  margin-right: auto; */
  border-radius:1rem;
  overflow: hidden;
}
.header-head>img{
  width: .56rem;
  height: .56rem;
}
/* content */
.content{
  background-color: #fff;
  padding-top: .37rem;
  font-size: .16rem;
  color: #000;
}
.content-item{
  padding-left: .15rem;
  padding-right: .15rem;
  padding-top: .15rem;
  padding-bottom: .15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-item>img{
  width: .06rem;
  height: .1rem;
  margin-right: .03rem;
}
.mo-spacing{
  background-color: #f4f4f4;
}
/* 退出登录 */
.loginout-btn{
  position: absolute;
  width: 100%;
  top:78%;
  z-index: 9;
}
</style>

